<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no">
    <title>贪吃蛇</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-width: 980px;
            margin: auto;
        }

        #map {
            width: 800px;
            height: 600px;
            background-color: #ccc;
            margin: 20px auto;
            position: relative;
        }

        #control {
            width: 800px;
            margin: 50px auto;
            font-size: 25px;
        }

        .keybox {
            width: 486px;
            height: 300px;
            margin: 50px auto;
        }

        .keybox div {
            height: 120px;
            width: 120px;
            margin: 20px auto;
            font-family: icomoon;
            border: 1px solid black;
            border-radius: 8px;
            line-height: 120px;
            text-align: center;
        }

        #keyleft, #keydown, #keyright {
            float: left;
            width: 120px;
            height: 120px;
            margin: 20px;
        }

        @font-face {
            font-family: 'icomoon';
            src: url('icomoon/fonts/icomoon.eot?z0uo7l');
            src: url('icomoon/fonts/icomoon.eot?z0uo7l#iefix') format('embedded-opentype'),
            url('icomoon/fonts/icomoon.ttf?z0uo7l') format('truetype'),
            url('icomoon/fonts/icomoon.woff?z0uo7l') format('woff'),
            url('icomoon/fonts/icomoon.svg?z0uo7l#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div id="control">
    <div id="score">得分：0</div>
    <div class="keybox">
        <div class="top" id="keyup"></div>
        <div class="left" id="keyleft"></div>
        <div class="bottom" id="keydown"></div>
        <div class="right" id="keyright"></div>
    </div>
</div>
<script src="Food.js"></script>
<script src="Snake.js"></script>
<script src="Game.js"></script>
<script>
    var agent = window.navigator.userAgent;
    if (agent.indexOf("Android") == -1 && agent.indexOf("iPhone") == -1) {
        document.querySelector(".keybox").style.display = "none";
    }
    //启动游戏
    var game = new Game(document.getElementById("map"));
    game.gameStart();
</script>
</body>
</html>